<template>
  <el-card style="border-radius: 8px;background-color: #f7f9fa; ">
    <div class="tag-select">
      <div class="select-condition">
        <span class="condition-title">筛选条件：</span>
        <el-tag
            v-for="condition in conditionList"
            :key="condition"
            type="success"
            closable
            effect="dark"
            size="large"
            style="margin-right: 15px"
            @close="removeCondition(condition)"
        >
          {{ condition }}
        </el-tag>
        <el-tag type="primary" effect="dark" size="large" v-if="chosenRegion">
          {{ chosenRegion }}
        </el-tag>
        <el-button :icon="Search" type="success" style="float: right" @click="initHeritageList">搜索</el-button>
      </div>
      <div class="select-region">
        <span class="condition-title">地区：</span>
        <span
            class="is-choose"
            style="margin-right: 10px;margin-left: 15px"
            @click="addRegion('all')"
        >
          全国
        </span>
        <span
            class="is-choose"
            v-for="region in hotRegionList"
            :key="region"
            style="margin-right: 15px;"
            @click="addRegion(region)"
        >
        {{ region }}
      </span>
        <span class="is-choose" @click="otherVisible = !otherVisible">其他城市</span>
        <el-icon @click="otherVisible = !otherVisible">
          <CaretBottom v-if="!otherVisible"/>
          <CaretTop v-else/>
        </el-icon>
        <div style="margin-left: 9%;margin-top: 5px;width: 70%" v-show="otherVisible">
          <span
              class="is-choose"
              v-for="region in otherRegionList"
              :key="region"
              style="margin-right: 15px;display: inline-block;margin-top: 8px"
              @click="addRegion(region)"
          >
        {{ region }}
          </span>
        </div>
      </div>
      <div class="select-category">
        <span class="condition-title">分类：</span>
        <el-checkbox-group v-model="conditionList" :min="0" :max="6">
          <el-checkbox
              border
              v-for="category in categoryList"
              :key="category.id"
              :label="category.name"
              style="margin-right: 12px;margin-bottom: 10px"
          >
            {{ category.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="clear-condition" @click="clearCondition">清空筛选条件</div>
    </div>
  </el-card>

  <el-divider>
    <el-icon>
      <star-filled/>
    </el-icon>
  </el-divider>

  <div class="heritage-list" v-if="heritageList.length > 0">
    <div>
      <el-card
          shadow="hover"
          v-for="heritage in heritageList"
          :key="heritage.id"
          style="cursor: pointer"
      >
        <template #header>
          <div class="card-header">
            <div class="left" @click="router.push({
              name:'heritageDetail',
              params:{
                id:heritage.id
              }
            })">
              <el-image
                  style="width: 50px;height: 50px;background-color: #bdaf97;"
                  :src="heritage.categoryImage"
                  alt="分类图片"
                  fit="contain"
              />
              <div style="display: flex;flex-direction: column;margin-left: 5px">
                <el-tag type="success" style="margin-bottom: 5px">{{ heritage.name }}</el-tag>
                <el-tag>{{ heritage.address }}</el-tag>
              </div>
            </div>
            <div class="right">
              <span v-if="heritage.description === null">暂无</span>
              <span v-else>{{ heritage.description.substring(0, 15) + '...' }}</span>
              <span v-show="heritage.description !== null" class="more-info" @click="openDescDialog(heritage.description)">更多</span>
            </div>
          </div>
        </template>
        <span style="font-size: 20px"><b>{{ heritage.categoryName }}</b></span>
      </el-card>
    </div>
    <div class="ad-list">
      <el-image style="width: 100%;height: 35%" src="../../public/ad/rio.jpg" alt="RIO广告"/>
      <el-image style="width: 100%;height: 35%" src="../../public/ad/lol.jpg" alt="RIO广告"/>
    </div>
  </div>
  <div v-else style="text-align: center;color: #757575">暂无数据</div>
  <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!--更多非遗描述信息模态框-->
  <el-dialog
      draggable
      v-model="descDialog"
      title="描述"
      width="30%"
  >
    <el-input v-model="descContent" rows="15" type="textarea"/>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="descDialog = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted,onBeforeUnmount} from "vue";
import {StarFilled} from '@element-plus/icons-vue'
import {useRouter, useRoute} from "vue-router"
import {Search} from '@element-plus/icons-vue'
import {useHeritageStore} from "../store/useHeritageStore.js";
import bus from "../util/bus.js";


const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const heritageStore = useHeritageStore()
const conditionList = ref([])
const regionList = ref([
  '上海市', '广东省', '北京市', '重庆市', '四川省', '天津市',
  '浙江省', '福建省', '山东省', '湖北省', '湖南省', '陕西省',
  '河北省', '黑龙江省', '河南省', '海南省', '吉林省', '江苏省',
  '江西省', '辽宁省', '宁夏回族自治区', '内蒙古自治区', '新疆维吾尔族自治区',
  '青海省', '山西省', '贵州省', '甘肃省', '台湾省', '西藏自治区',
  '安徽省', '香港特别行政区', '云南省', '澳门特别行政区', '广西壮族自治区'
])
const hotRegionList = ref(regionList.value.splice(0, 10))
const otherRegionList = ref(regionList.value.splice(11, regionList.value.length))
const otherVisible = ref(false)
const categoryList = ref([])
const chosenRegion = ref('')
const heritageList = ref([])
let descDialog = ref(false)
const descContent = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref()


const handleSizeChange = (val) => {
  pageSize.value = val
  initHeritageList()
}
const handleCurrentChange = (val) => {
  pageNum.value = val
  initHeritageList()
}
//打开描述对话框
const openDescDialog = (description) => {
  descDialog.value = true
  descContent.value = description
}
//清空筛选条件
const clearCondition = () => {
  conditionList.value = []
  chosenRegion.value = ''
  initHeritageList()
}
//添加地区标签
const addRegion = (name) => {
  chosenRegion.value = name === 'all' ? '' : name
}
//移除条件标签
const removeCondition = (name) => {
  conditionList.value = conditionList.value.filter(condition => condition !== name)
}
//初始化筛选条件
const changeConditionList = () => {
  if (route.query.categoryName){
    conditionList.value = []
    conditionList.value.push(route.query.categoryName)
  }
}
//挂载
onMounted(() => {
  changeConditionList()
  bus.on('getHeritageList',() => {
    initHeritageList()
  })
})
//销毁之前
onBeforeUnmount( () => {
  bus.off('getHeritageList');
})
changeConditionList()
//初始化非遗列表
const initHeritageList = () => {
  const heritageVO = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: heritageStore.searchInputValue,
    address: chosenRegion.value,
    categoryList: conditionList.value
  }
  proxy.request.post('/api/heritage/queryHeritageList',heritageVO).then(res => {
    if (res.code === '1'){
      pageTotal.value = res.data.total
      heritageList.value = res.data.records
    }
  })
}
initHeritageList()
//查询非遗分类集合
const initCategoryList = () => {
  proxy.request.get('/api/category/queryCategoryList').then(res => {
    if (res.code === '1'){
      categoryList.value = res.data
    }
  })
}
initCategoryList()

</script>

<style lang="less" scoped>
.ad-list {
  margin-left: 50px;
}

.heritage-list {
  .el-card {
    .card-header {
      .left {
        .el-tag {
          font-size: 14px;
        }

        display: flex;
      }

      .right {
        .more-info:hover {
          color: #00bebd;
        }

        .more-info {
          color: #747bff;
          border-bottom: 1px solid;
          cursor: pointer;
        }

        width: 260px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f7f9fa;
      }

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    width: 600px;
    margin-bottom: 30px;
  }

  display: flex;
  margin-top: 30px;
}

.tag-select {
  .clear-condition:hover {
    color: #00bebd;
  }

  .clear-condition {
    float: right;
    color: #999999;
    cursor: pointer;
  }

  .select-condition {
    margin-bottom: 20px;
  }

  .select-region {
    .is-choose:hover {
      color: #00bebd;
    }

    .is-choose {
      cursor: pointer;
    }

    margin-bottom: 20px;
  }

  .select-category {
    display: flex;
  }

  .condition-title {
    color: #757575;
    font-size: 18px;
    margin-right: 15px;
    width: 80px
  }

  padding-bottom: 10px;
}
</style>